<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏后台管理系统</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>

<div id="overlay" class="overlay" style="display: none;"></div>

<div id="page-container" class="page-container">
    <div id="left-side" class="left-side">
        <div class="container">
            <img src="image/title.png" alt="图标">
            <span class="logo-title">游戏后台</span>
        </div>
        <ul id="tabContainer" class="tabContainer">

        </ul>
    </div>

    <div id="middle-side" class="middle-side">
        <form id="registerForm" class="login-form">
            <div class="login-image"><img src="image/title.png" alt="图标">注册页面</div>
            <input type="text" id="register-username" class="login-user" placeholder="用户名" pattern="[a-zA-Z0-9_]{1,20}" title="用户名必须为字母、数字或下划线，长度不超过 20 个字符" required/>
            <input type="password" id="register-password" class="login-user" placeholder="密码" pattern="[a-zA-Z0-9_]{1,20}" title="密码必须为字母、数字或下划线，长度不超过 20 个字符" required/>
            <button type="submit">注册</button>
        </form>
        <form id="loginForm" class="login-form">
            <div class="login-image"><img src="image/title.png" alt="图标">登录页面</div>
            <input type="text" id="login-username" class="login-user" placeholder="账号" required/>
            <input type="password" id="login-password" class="login-user" placeholder="密码" required/>
            <button type="submit">登陆</button>
        </form>
        <div class="userItem hidden" id="userItem">
            <img src="image/user.png" alt="图标">
            <h1>用户名：雷浩然</h1>
        </div>
    </div>

    <div id="right-side" class="right-side">
        <div class="login">
            <span class="title">欢迎来到浩然后台管理系统</span>
            <ul id="login-register" class="login-list hidden">
                <li class="li-login"><a href="#" id="login" class="no-underline">登录</a></li>
                &nbsp;
                <li class="li-login"><a href="#" id="register" class="no-underline">注册</a></li>
            </ul>
            <img src="image/user.png" id="user" class="login-list hidden" alt="图标">
            <ul class="menu" id="menu">
                <li class="li-register"><a id="userInfo" class="menu-item">个人中心</a></li>
                <li class="li-register"><a id="switchAccount" class="menu-item">切换账号</a></li>
                <li class="li-register"><a id="logout" class="menu-item">退出登录</a></li>
            </ul>
        </div>

        <div class="web-body">
            <div class="content">
                <h1>

                </h1>
                <div class="list">
                    <div class="list-title">
                        <span class="list-item">

                        </span>
                        <img src="image/reward.png" id="iconAdd" class="iconAdd" alt="图标">
                    </div>
                    <table id="data-table" class="table-body">
                        <thead>
                        <tr></tr>
                        </thead>

                        <tbody>
                        <!-- 先留空，等待js来填充数据 -->
                        </tbody>
                    </table>

                    <div id="pagination-container">
                        <!-- 页码列表等待js来填充 -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="module" src="js/script.js"></script>
</body>
</html>